<template>
    <ul>
        <li v-for="(item,index) in Olist" :key="item.id" :class="{active:item.isComputed}">
            <div class="left">
                <input type="checkbox" :checked="item.isComputed" @change="checkFn(item,$event)">
                <p>{{item.content}}</p>
            </div>
            <b @click="deletFn(index)">x</b>
        </li>
    </ul>
    <div>
        <button @click="filter('all')">全部：{{allCount}}</button>
        <button @click="filter('completed')">已完成：{{completedCount}}</button>
        <button @click="filter('active')">未完成：{{activeCount}}</button>
    </div>
</template>
<script setup>
import {defineProps,toRefs,defineEmits} from "vue"
let props = defineProps(['Olist','allCount','completedCount','activeCount'])
let {Olist,allCount,completedCount,activeCount} =toRefs(props)
let emit =defineEmits('del','get')
let deletFn=(index)=>{
    emit("del",index)
}
let checkFn=(current,e)=>{
console.log(e.target)
console.log(e.target.checked)
current.isComputed=e.target.checked
}
let filter = (flag)=>{
    emit("get",flag)
}
</script>
<style scoped>
li{
    align-items: center;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}
li .left{
    display: flex;
}
.active{
    background-color: pink;
}
</style>